<template>
	<view class="container">
		<!-- 排队信息 -->
		<view class="queueList">
			排队列表
			<view class="queue_index">
				<view>当前位
					<view v-for="(item, i) in queueIndex" :key="i">
						{{ queueBool ? (i + 1) : item }}
					</view>
				</view>
				<view>用户名
					<view v-if="queueUserId.length > 0">
						<view v-for="(item, i) in queueUserId" :key="i">
							{{ item }}
						</view>
					</view>
					<view v-else-if="queueUserId.length == 0">
						<view v-for="(item, i) in queueUserIds" :key="i">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view v-if="queueIndex.length == 0" style="text-align:center;margin-top:40rpx">暂无排队信息</view>

		</view>
		<view class="navBar">
			<image @click="goBack" style="display: block; width: 50rpx;height: 50rpx;"
				src="https://zsw-bimface-res.izsw.net/img/bim-community/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png"></image>
			<view class="title">{{ boxList.name }}</view>
			<view></view>
		</view>
		<view class="tips">第{{ number }}箱 剩余：{{ boxList.remain }}/{{ boxList.skuTotal }}盒</view>
		<!-- 轮播 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :interval="interval" :duration="duration">
				<swiper-item class="list">
					<image class="swiper-item" src="../../static/box.png"></image>
					<view class="btn">
						<view class="b1" @click="replaceBox()">换一箱</view>
						<view class="b2" @click="refulse()">刷新</view>
					</view>
					<view class="danmu-box">
						<lff-barrage ref="lffBarrage2" :list="danMuList" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 换一箱组件 -->
		<changeBox v-if="replaceboxList" :dialogVisible="replaceboxList" @close="showReplace" :boxUuid="boxUuid">
		</changeBox>
		<view v-if="replaceboxList" class="yfsMask" @click="showYfsBox()"></view>
		<view class="center">
			<view :class="{ 'active': selectedIndex !== 0, 'actived': selectedIndex === 0 }" @click="selectItem(0)">赏品余量
			</view>
			<view :class="{ 'active': selectedIndex !== 1, 'actived': selectedIndex === 1 }" @click="selectItem(1)">奖池赏品
			</view>
			<view :class="{ 'active': selectedIndex !== 2, 'actived': selectedIndex === 2 }" @click="selectItem(2)">中奖记录
			</view>
		</view>
		<view class="ccb" v-if="selectedIndex === 1">
			<view class="countDown" v-if="CountDown">
				抽奖倒计时：{{ CountDown }}s(倒计时结束后退出当前队伍)
			</view>
			<view class="gogo" v-else>
				<view>冲冲榜 </view>
				<view>进行中</view>
				<view>第一位消耗30抽用户，解锁冲冲A赏</view>
			</view>
		</view>
		<view class="content" v-if="selectedIndex === 1">

			<view class="content-list" v-for="(item, index) in boxSkuVo" :key="index" @click="godetails(item.id)">
				<view class="header" v-if="item.id">
					<view class="left">
						现货
					</view>
					<view class="right" :style="setBg(item)">
						<text>{{ item.grandPrizeName }}</text>
					</view>
				</view>
				<image class="bg-img" src="../../static/playMarket/mangheBGC.png" mode=""></image>
				<image style="width: 100%; height: 200rpx;display: block;border-radius: 20rpx;" :src="item.detailImages"
					mode="">
				</image>
				<view class="content-list-title">
					{{ item.name }}
				</view>
				<view class="content-list-footer" v-if="item.id">
					<view class="price">
						<text>￥</text><text style="font-size: 20rpx;">{{ item.moneyPrice }}</text><text>/张</text>
					</view>
					<view class="count">
						{{ item.probability }}%
					</view>
				</view>
				<view class="content-list-stock">
					{{ item.stockMargin }}
				</view>
				<view class="yfsmengban" v-if="item.id == null">
					已售罄
				</view>
			</view>
		</view>
		<view class="paidui" @click="queue()">
			<text>点击</text><text>排队</text>
		</view>
		<view class="unqueue" @click="delDequeue()">
			<text>取消</text><text>排队</text>
		</view>
		<view class="choujiang">
			<view class="cj-list" @click="open(1)">
				抽一发
			</view>
			<view class="cj-list" @click="open(5)">
				抽五发
			</view>
			<view class="cj-list" @click="open(10)">
				抽十发
			</view>
			<!-- v-if="lastNum" -->
			<view class="cj-list" @click="open(isLastNumber, '', '全收')">
				全收
			</view>
		</view>
		<!-- 排队提示 -->
		<view class="queuePrompt">
			<view class="" v-if="prompt">
				<view v-if="queueShow">
					{{ queueShow }}
				</view>
				<view v-else>
					请排队，当前共<text>{{ queues[1] ? queues[1] : (queueIndex ? queueIndex.length : 0) }}</text>人
				</view>

			</view>
			<view class="" v-else>
				{{ queueShow }}
				<!-- 已排队，您当前在第{{ queues[0] }}位/共{{ queues[1] }}人 -->
			</view>
		</view>
		<!-- 轮到自己提示弹框 -->
		<uni-popup ref="pcontent" type="center" :mask-click="false">
			<view class="popup_content">
				<!-- <view class="popop_head">
					<icon type="cancel" size="26" color="#333" @click="close()" />
				</view> -->
				<view class="popup_title">
					抽奖提示
				</view>
				<view class="popup_details">
					您现在可以在倒计时结束之前点击确认可以选择去抽奖，如果点击取消按钮会退出当前队伍，重新排队。
				</view>
				<view class="popup_btnGroup">
					<span class="u-btn" @click="queueClose()">取消({{ CountDown }}s)</span>
					<span class="u-btn u-btn-danger" @click="queueSubmit()">确认抽奖</span>
				</view>
			</view>
		</uni-popup>
		<!-- 中奖记录 -->
		<view v-if="selectedIndex === 2" class="records">
			<img v-if="BoxRecordByDay.length == 0" class="records-img" src="../../static/manghe/null.png" alt="" />
			<p class="records-text" v-if="BoxRecordByDay.length == 0">暂无中奖记录</p>
			<view v-else>
				<view class="recordsItem" v-for="(item, index) in BoxRecordByDay" :key="index">
					<image class="box-image-g" :src="item.image" alt="" mode="aspectFill"
						@click="previewImage(item.image, index)" />
					<view class="cont">
						<text class="cont-text">{{ item.skuName }}</text>
						<p class="winTime">{{ item.winTime }}</p>
					</view>
					<image class="head" :src="item.userAvatar" alt="" />
					<view class="usercont">
						<text>{{ item.username }}</text>
					</view>
					<view class="tip">
						<text>{{ item.level }}</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 奖品余量 -->
		<view class="ysf-center" v-if="selectedIndex === 0">
			<view class="center-con" v-for="(value, key) in yfsDetailList" :key="key">
				<view class="rank">{{ key }}</view>
				<view class="detail">剩余数量</view>
				<view class="num">{{ value }}</view>
			</view>
		</view>
		<!-- 盲盒详情 -->
		<uni-popup ref="details" type="bottom">
			<view class="pay" v-if="detailsContent.length">
				<view class="prices">
					<img class="image-price" :src="detailsContent[0].detailImages" alt="" mode="aspectFill" />
					<view class="contents">
						<view>
							奖品名称:{{ detailsContent[0].name }}
						</view>
						<view>
							奖品价格:{{ detailsContent[0].moneyPrice }}
						</view>
					</view>
				</view>
				<view v-html="detailsContent[0].description" class="particulars"></view>
			</view>
		</uni-popup>

		<!-- 确认支付弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="pay">
				<h3>{{ boxList.name }}</h3>
				<view class="price">
					<text>单价：</text>
					<text>￥{{ boxList.price }}</text>
				</view>
				<view class="num">
					<text>数量：</text>
					<text>购{{ num }}发</text>
				</view>
				<view class="num">
					<view>
						<checkbox color="#6C40FF" :class="{ disabled: isIntegralDisabled }"
							:disabled="isIntegralDisabled" :checked="shouldCheckPayment" @click="updateShouldCheck()"
							background-color="#fff" border-color="#6C40FF" activeBackgroundColor="#fff"
							activeBorderColor="#6C40FF" />
						<text>积分：</text>
					</view>
					<text>{{ integral || 0 }}积分</text>
				</view>
				<view class="list-item">
					<view class="body">
						<!-- 优惠券 -->
						红包可用
					</view>
					<view class="arrow-right bold" :class="{ disabled: shouldCheckPayment }" v-if="currentCoupon.id"
						@tap="couponsVisible = true">
						<text class="meta red">- ¥{{ currentCoupon.discountMoney }}</text>
						<text class="new-iconfont icon-arrow-right"></text>
					</view>
					<view class="arrow-right" :class="{ disabled: shouldCheckPayment }" v-else
						@tap="couponsVisible = true">
						<text class="meta" v-if="usableCoupons.length">{{ usableCoupons.length }}张可用</text>
						<text class="meta" v-else>无可用</text>
						<text class="new-iconfont icon-arrow-right"></text>
					</view>
				</view>
				<view class="sunList">
					<view class="sums">
						<text></text>
						<text v-if="integralNum">积分扣除：-{{ integralNum }}</text>
					</view>
					<view class="sum">
						<text></text>
						<text>小计：{{ totalprice }}镇北币</text>
					</view>
				</view>
				<view class="skip">
					<text>
						<checkbox :checked="skipAnimation" @click="skipCheck()" color="#6C40FF" background-color="#fff"
							border-color="#6C40FF" activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
						<span>跳过动画</span>
					</text>
				</view>
				<view class="agree">
					<text>
						<checkbox :checked="checkPayMent" @click="updateCheck()" color="#6C40FF" background-color="#fff"
							border-color="#6C40FF" activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
					</text>
					我已阅读并同意<u @click="goRule()">《镇北魔盒盲盒须知》</u>
				</view>
				<button :disabled="isSubmitting" class="button" @click="submitPay()">
					确认购买
				</button>
			</view>
		</uni-popup>
		<UsableCouponPopup v-if="couponsVisible" :unusableCoupons="unusableCoupons" :usableCoupons="usableCoupons"
			:currentCoupon="currentCoupon" :totalprice="totalprice" @change="couponChange"
			@close="couponsVisible = false">
		</UsableCouponPopup>
	</view>
</template>

<script>
import {
	showYgs,
	queueMy,
	dequeue
} from "@/api/payerMarket.js";
import {
	lineUp,
	pay,
	skuLevel,
	userAssert,
	getBoxRecordByDay
} from "@/api/blind.js";
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js";
import changeBox from "./components/changebox.vue"
import List from "./components/list.vue"
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
export default {
	components: {
		List,
		changeBox,
		lffBarrage
	},
	data() {
		return {
			autoplay: true,
			interval: 2000,
			duration: 1000,
			selectedIndex: 1, // 默认选中第一个
			boxList: {},
			boxSkuVo: [],
			websock: null,
			lockReconnect: false,
			number: 0,
			danmuList: [],
			danmakuContainer: {},
			BoxRecordByDay: [],
			replaceboxList: false,
			// 购机发
			num: 0,
			// 奖品余量
			yfsDetailList: null,
			adminBoxvo: [],
			// 奖品等级存放数组
			items: [],
			// 红包信息
			couponsVisible: false,
			unusableCoupons: [],
			usableCoupons: [],
			currentCoupon: {},
			totalprice: null,
			// 排队人数
			queues: [],
			prompt: true,
			// 用户协议选中
			checkPayMent: false,
			time: null,
			page: 1,
			perPage: 10,
			// 此字段判断当前页面进的是不是动画页面，用于取消排队
			yfsPd: false,
			boxUuid: null,
			detailsContent: [],
			// 是否全收
			lastNum: false,
			skipAnimation: false,
			// 全收数量是几发
			isLastNumber: 0,
			// 排队信息
			queueShow: "",
			// 排队列表
			queue_list: null,
			// 排队序号
			queueIndex: [],
			// 排队用户名 websocket赋值
			queueUserId: [],
			// 从show接口直接拿排队信息
			queueUserIds: [],
			// 判断是否排队
			queueBool: false,
			// 判断是否轮到自己抽奖
			drawBool: false,
			// 排队倒计时
			CountDown: 0,
			timer: null,
			// 积分
			integral: {},
			integralCheck: false,
			integralNum: 0,
			isIntegralDisabled: false,
			// 支付按钮
			isSubmitting: false // 控制按钮是否禁用
		}
	},
	async onLoad(e) {
		this.boxId = e.boxId;
	},
	onShow() {
		this.getList();
		// 一番赏详情
		this.yfsDetails();
		// 排队即时通讯
		this.initWebSocket();
		// 中奖记录
		// this.getBoxRecordByDay();
		this.isLastNum();
		// 排队显示
		this.yfsPd = false;
		clearTimeout(this.timer);
		this.prompt = $getStorage('prompt')
		// 奖品等级
		this.getskuLevel();
		let that = this
		// that.time = setTimeout(function () {
		// 	that.delDequeue("show")
		// }, 60000)
		// debugger
		// console.log(this.$store.getters.skipAnimation)
		this.skipAnimation = $getStorage('skipAnimation') == false ? false : true;   // 跳过动画 
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo
		},
		shouldCheckPayment() {
			// 根据积分余额决定多选框是否选中
			return this.integral > 0 && this.integralCheck;
		},
	},
	mounted() {
		this.$nextTick(() => {
			this.renderDanmakuContainer();
		})
	},
	onHide() {
		if (!this.yfsPd && !this.prompt) {
			this.delDequeue("show");
			// this.websock.onClose()
		} else {
			clearTimeout(this.timer)
		}
	},
	onReady() {
		if (!this.yfsPd && !this.prompt) {
			if (!this.prompt) {
				let that = this
				that.delDequeue("show")
				// this.websock.onClose()
				return;
			}
			this.delDequeue();

		} else {
			// clearTimeout(this.time)
		}
	},
	onUnload() {
		if (!this.yfsPd && !this.prompt) {
			this.delDequeue("show");
			// this.websock.onClose()
			// clearTimeout(this.time)
		} else {
			// clearTimeout(this.time)
		}

	},
	async onReachBottom() {
		this.page++;
		const res = await this.getBoxRecordByDay();
		this.loading = false;
		this.BoxRecordByDay.push(...res.data.list);
	},
	methods: {
		// 积分选择框逻辑
		updateShouldCheck() {
			this.integralCheck = !this.integralCheck;
			this.open(this.num, true);
		},
		isLastNum() {
			// 查看当前盒子是否可以全收
			this.$http(`/yfs/isLastNum/${this.boxId}`, "get").then(res => {
				this.lastNum = res.data
			})
		},
		// 查看奖品详情
		godetails(id) {
			this.$refs.details.open('bootom')
			this.$http('/new/box/particulars', "get", {
				type: 3,
				id: id
			}).then(res => {
				this.detailsContent = res.data
			})
		},
		previewImage(urls, index) {
			uni.previewImage({
				urls: [urls],
				current: index
			})
		},
		// 盲盒规则
		goRule() {
			uni.navigateTo({
				url: "/pages/rule/rule/rule?id=2"
			})
		},
		// 返回上个页面
		goBack() {
			uni.switchTab({
				url: '/pages/index/index?activeTab=3',
			});
		},
		// 奖品等级
		async getskuLevel() {
			await skuLevel({
				type: 3,
				boxId: this.boxId
			}).then(res => {
				this.items = res.data;
				this.boxSkuVo.forEach(item => {
					if (item.id != null) {
						const grands = this.items.find(items => items.id == item.id)
						grands ? item.grandPrize = grands.level : null
						grands ? item.grandPrizeName = grands.name : null
						grands ? item.probability = grands.probability : null
					}
				})
			})
		},
		// 刷新操作
		refulse() {
			this.getList()
		},
		// 奖品余量方法
		yfsDetails() {
			// let boxid = id ? id : this.boxId
			this.$http("/yfs/detail/" + this.boxId, "get").then(res => {
				this.yfsDetailList = res.data;
				for (let key in this.yfsDetailList) {
					const grand = this.items.find(item => item.level === parseInt(key));
					if (grand) {
						const name = grand.name;
						this.yfsDetailList[name] = this.yfsDetailList[key];
						delete this.yfsDetailList[key];
					}
				}

			})
		},
		async getBoxRecordByDay() {
			return await getBoxRecordByDay({
				activityName: "一番赏",
				page: this.page,
				perPage: this.perPage,
				boxId: this.boxId
			});
		},
		// 一番赏中奖记录
		// getBoxRecordByDay() {
		// 	this.$http("/box-record/getBoxRecordByDay", "get", {
		// 		activityName: "一番赏",
		// 		page:this.page,
		// 		perPage:this.perPage
		// 	}).then(res => {
		// 		this.BoxRecordByDay = res.data.list
		// 		this.BoxRecordByDay.forEach(item=>{
		// 			const Record = this.items.find(items=> items.level == item.level)
		// 			return item.level = Record.name
		// 		})
		// 	})
		// },
		renderDanmakuContainer() {
			// 等dom渲染完成后获取弹幕容器宽高
			this.$nextTick(() => {
				const width = this.$refs.danmakuRef?.$el?.clientWidth;
				const height = this.$refs.danmakuRef?.$el?.clientHeight;

				this.danmakuContainer = {
					width: 700,
					height: 500
				}
			})
		},
		// 换一箱操作
		replaceBox() {
			this.replaceboxList = true;
		},
		// 换一箱拿到箱子id
		showReplace(id) {
			this.replaceboxList = false;
			this.boxId = id
			this.getList()
			this.yfsDetails()
			console.log("换一箱", this.boxId);

		},

		// 点击遮罩层关闭换一箱弹框
		showYfsBox() {
			this.replaceboxList = false;
		},
		// 连接排队websocket
		initWebSocket() {
			let that = this
			// const url = 'ws://172.16.103.41:8899/connect/' + that.userInfo.id;
			const url = 'ws://8.142.124.111:8889/yfs-box/queue/' + that.userInfo.id;
			this.websock = uni.connectSocket({
				url: url,
				complete: () => { } // 由于uni封装，必须加个回调才会返回一个SocketTask对象
			});
			this.websock.onOpen(this.websocketonopen)
			this.websock.onMessage(this.websocketonmessage)
			// this.websock.onClose(this.websocketclose)
			this.websock.onError(this.websocketonerror)
		},
		websocketonopen() { // 连接建立之后执行send方法发送数据，连接成功
			// const data = {
			// 	token: this.userInfo.id
			// };
			// if (data.token) {
			// 	const result = JSON.stringify(data);
			// 	this.websock.send({
			// 		data: result
			// 	})
			// } else {
			// 	this.websock.close()
			// }
		},
		websocketonmessage(e) { // /* 数据接收 */
			console.log(e.data);
			const num = JSON.parse(e.data);
			console.log(num);
			if (num.type) {
				if (num.type == 2) {
					this.queueShow = num.message
				} else if (num.type == 3) {
					this.queue_list = num.message
					this.queueIndex = Object.keys(this.queue_list);
					this.queueUserId = Object.values(this.queue_list);
					this.queueBool = false
				} else if (num.type == 1) {
					// this.drawBool = true;
					this.getYfsQueueCountDown();
					// this.refreshKey();
					this.$refs.pcontent.open("center")
				} else if (num.type == 4) {
					console.log("55555555555555", num.message);
					this.danMuList = this.danMuList || [];
					this.danMuList.push(num.message)
					// console.log("44444444444", this.danMuList);
					// plus.runtime.setBadgeNumber(num.message); // 设置角标
				}
			}
			// console.log(this.danMuList, 'this.danMuList')
			// if (num?.username) {
			// 	this.danMuList.push(`${num?.username}抽中了${num?.skuName}`)
			// }
			// plus.runtime.setBadgeNumber(num); // 设置角标
		},
		websocketclose(e) { // 关闭
			if (this.userInfo) { // 用户登录还存在时再进行重连
				console.log('断开了重连');
				this.reconnect()
			}
		},
		websocketonerror() {
			if (this.userInfo) { // 用户登录还存在时再进行重连
				console.log('断开了重连');
				this.reconnect()
			}
		},
		reconnect() {
			if (this.lockReconnect) return;
			this.lockReconnect = true;
			//没连接上会一直重连，设置延迟避免请求过多
			setTimeout(function () {
				this.initWebSocket();
				console.log('重连中');
				this.lockReconnect = false;
			}, 5000); //这里设置重连间隔(ms)
		},
		// 一番赏详情列表
		getList(id) {
			// console.log("getList", this.boxId);
			let _this = this
			// let boxid = id ? id : _this.boxId
			// console.log("22222222222222222", this.prompt);
			// console.log("33333333333333233", this.CountDown);
			if (this.CountDown != 0 && !this.prompt) {
				clearInterval(this.timer);
				this.getYfsQueueCountDown();
				this.refreshKey();
			} else {
				clearInterval(this.timer);
				this.CountDown = 0
			}
			showYgs(_this.boxId).then(res => {
				if (res.code == 200) {
					_this.boxList = res.data.userBoxvo
					_this.boxSkuVo = res.data.userBoxvo.boxSkuVo
					_this.adminBoxvo = res.data.adminBoxvo.boxSkuVo
					_this.number = res.data.num
					_this.queues = res.data.queue
					_this.boxUuid = res.data.uuid
					_this.isLastNumber = res.data.userBoxvo.stockSum
					_this.boxSkuVo.forEach(item => {
						if (item.id != null) {
							const grands = this.items.find(items => items.id == item.id)
							grands ? item.grandPrize = grands.level : null
							grands ? item.grandPrizeName = grands.name : null
							grands ? item.probability = grands.probability : null
						}
					})

					_this.queueUserIds = _this.queues[2].map(item => ({ name: item.name }));
					_this.queueBool = true
					_this.queueIndex = _this.queueUserIds
					_this.totalprice = _this.boxList.price * _this.num
				}
			})
		},

		skipCheck() {
			this.skipAnimation = !this.skipAnimation
			this.$nextTick(() => {
				$setStorage("skipAnimation", this.skipAnimation);
			})
		},
		// 用户协议选中
		updateCheck() {
			this.checkPayMent = !this.checkPayMent
		},
		async selectItem(index) {
			this.selectedIndex = index;
			if (this.selectedIndex == 2) {
				const res = await this.getBoxRecordByDay();
				this.BoxRecordByDay.push(...res.data.list);
				this.BoxRecordByDay.forEach(item => {
					const Record = this.items.find(items => items.level == item.level)
					return item.level = Record.name
				})
			}
		},
		// 红包点击立即使用的方法
		couponChange(e) {
			if (e.id === this.currentCoupon.id) {
				// 再次点击取消使用优惠券  // 暂时关闭此功能
				this.currentCoupon = {}
				this.getList();
				this.isIntegralDisabled = false
			} else {
				this.currentCoupon = e
				this.isIntegralDisabled = true
				if (this.totalprice - this.currentCoupon.discountMoney < 0) {
					this.totalprice = 0
				} else {
					this.totalprice = this.totalprice - this.currentCoupon.discountMoney
				}
			}
		},

		// 支付的弹框出现
		open(num, fromCheckbox = false, str) {
			if (!this.lastNum && str == "全收") {
				uni.showToast({
					title: "您还未到达全收条件",
					icon: 'none',
				});
				return;
			} else {
				this.isIntegralDisabled = false
				this.num = num
				this.$refs.popup.open('bottom')
				this.currentCoupon = {}
				this.totalprice = (this.boxList.price * this.num).toFixed(2)
				this.isSubmitting = false;
				// type:1代表消费盲盒，接口是查询余额接口
				userAssert({
					type: 1
				}).then((res) => {
					this.Coin = res.data || {}
					this.unusableCoupons = res.data.unableCoupons || []
					this.usableCoupons = res.data.availableCoupons || []
					this.integral = res.data.integral.balance || 0
					if (!fromCheckbox) {
						this.integralCheck = this.integral > 0; // 根据积分余额设置选中状态
					}
					if (this.integralCheck) {
						if ((this.integral / 100) > this.totalprice) {
							this.integralNum = this.totalprice * 100
							this.totalprice = 0
						} else {
							this.integralNum = this.integral
							this.totalprice = (this.totalprice - (this.integral / 100)).toFixed(2)
						}
					} else {
						this.integralNum = 0
						this.totalprice = (this.boxList.price * this.num).toFixed(2)
					}
				})
			}

		},
		// 取消排队
		delDequeue(show) {
			if (show) {
				dequeue(this.boxId).then(res => {
					if (res.code == 200) {

						this.prompt = true;
						$setStorage('prompt', this.prompt)
						this.sendYfsQueue();
						// console.log("this.prompt", this.prompt)
						clearTimeout(this.timer);
						this.CountDown = 0;
						this.getList();
					}
				})
			} else {
				dequeue(this.boxId).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "您已退出当前一番赏排队队列",
							icon: 'none',
							duration: 4000,
						});

						this.prompt = true;
						$setStorage('prompt', this.prompt)
						this.sendYfsQueue();
						this.CountDown = 0;
						clearTimeout(this.timer)
						this.getList();
					}
				})
			}

		},
		// 排队倒计时
		getYfsQueueCountDown() {
			this.$http("/yfs/getYfsQueueCountDown", "get").then(res => {
				this.CountDown = res.data.countDown;
				this.startCountDown()
			})
		},
		startCountDown() {
			// 清除之前的计时器
			if (this.timer) {
				clearInterval(this.timer);
			}
			// 每秒更新倒计时
			this.timer = setInterval(() => {
				if (this.CountDown > 0) {
					this.CountDown--;
				} else {
					clearInterval(this.timer); // 倒计时结束，清除计时器
					this.delDequeue(); // 调用倒计时结束后的逻辑
					this.$refs.pcontent.close();
				}
			}, 1000);
		},
		// 确认抽奖
		queueSubmit() {
			this.$refs.pcontent.close();
			this.$http(`/yfs/readBulletFrame?boxId=${this.boxId}`, "put").then(res => {
				if (res.message == "已读") {

				}
				clearInterval(this.timer);
				this.getYfsQueueCountDown();
				// this.refreshKey();
			})

		},
		refreshKey() {
			this.$http(`/yfs/refreshKey/${this.boxId}`, "post").then(res => { })
		},
		// 排队取消逻辑
		queueClose() {
			clearInterval(this.timer);
			this.delDequeue();
			this.$refs.pcontent.close();
		},
		// 点击排队接口
		queue() {
			lineUp(this.boxId).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
					});
					this.prompt = false;
					$setStorage('prompt', this.prompt)
					this.getList();
					this.sendYfsQueue();
					let that = this
				}
			})
		},
		// paidui
		sendYfsQueue() {
			this.$http(`/yfs/sendYfsQueue/${this.boxId}`).then(res => {

			})
		},
		// 点击支付
		submitPay() {
			// clearTimeout(this.time);
			// this.time = setTimeout(function () {
			// 	this.delDequeue()
			// }, 10000)
			if (this.num > this.boxList.stockSum) {
				uni.showToast({
					title: "剩余盒子数量不足",
					icon: 'none',
					duration: 4000,
				});
				return false;
			}
			// 用户协议勾选校验
			if (!this.checkPayMent) {
				uni.showToast({
					title: "请阅读后勾选镇北魔盒盲盒须知再支付",
					icon: 'none',
					duration: 2000,
				});
				return
			}
			if (this.isSubmitting) return; // 如果已经在提交中，直接返回
			this.isSubmitting = true; // 设置按钮为禁用状态
			this.$http("/yfs/canLottery", "get", {
				boxId: this.boxId,
				num: this.num
			}).then(res => {
				if (res.code == 200) {
					queueMy(this.boxId).then(res => {
						// 需要判断有没有进行排队
						if (res.code == 500) {
							uni.showToast({
								title: "请您先点击排队再点击支付",
								icon: 'none',
								duration: 2000,
							});
							this.$refs.popup.close()
							this.isSubmitting = false;
						} else if (res.code == 204) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000,
							});
							this.$refs.popup.close()
							this.isSubmitting = false;
						} else {

							this.$http("/new/box/checkStock", "get", {
								boxId: this.boxId,
								type: 3,
								num: this.num
							}).then(res => {
								if (res.code == 200) {

									let ment = {
										totalMoney: this.boxList.price * this.num,
										couponsId: this.currentCoupon.id ? this.currentCoupon.id : "",
										payMoney: this.totalprice,
										activiteType: 3,
										integral: this.integralNum,
										payType: 1
									}
									uni.showLoading({
										title: '正在支付中...'
									})
									this.yfsPd = true;
									pay(ment).then((res) => {
										if (res.code == 200) {
											// clearTimeout(this.time);
											// 关闭确认支付的弹框
											this.$refs.popup.close()

											// 存储盒子信息
											$setStorage('yfsList', JSON.stringify(this.adminBoxvo));
											uni.hideLoading()
											uni.showToast({
												title: "支付成功,即将跳转到抽奖",
												icon: 'none',
												duration: 4000,
											});
											let that = this
											console.log(that.num);
											this.isSubmitting = false;
											let code = res.message
											// 延时跳转到抽奖页面
											setTimeout(() => {
												uni.navigateTo({
													url: '/pages/blind/index2/index2?type=' + 'yfs' +
														'&num=' + that.num +
														"&boxId=" + that.boxId + "&code=" + code
												});
											}, 2000);
										} else if (res.code == 500) {
											uni.hideLoading()
											uni.showToast({
												title: res.message,
												icon: 'none',
												duration: 4000,
											});
											setTimeout(function () {
												uni.navigateTo({
													url: '/pages/myRedpack/index'
												});
											}, 2000);
										}
									})
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration: 2000,
									});
								}
							})

						}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000,
					});
				}
			})


		},
		setBg(item) {
			let bgColor = ''
			if (item.grandPrize == 0) {
				bgColor = "#352b26"
			} else if (item.grandPrize == 1) {
				bgColor = "#6a4c24"
			} else if (item.grandPrize == 2) {
				bgColor = "#508c7b"
			} else if (item.grandPrize == 3) {
				bgColor = "#35085b"
			} else if (item.grandPrize == 4) {
				bgColor = "#638ef0"
			}
			return `backgroundColor:${bgColor}`
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: black;
}

.disabled {
	opacity: 0.5;
	/* 半透明效果 */
	cursor: not-allowed;
	/* 更改鼠标指针 */
	pointer-events: none;
	/* 阻止所有交互 */
}

.popup_content {
	width: 600rpx;
	// height: 600rpx;
	border-radius: 20rpx;
	background-color: #fff;
	padding: 20rpx;
	box-sizing: border-box;
}

.popop_head {
	display: flex;
	justify-content: end;
}

.popup_title {
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #333;
}

.popup_details {
	padding: 20rpx;
	text-indent: 2em;
	text-align: center;
	font-size: 28rpx;
	color: #2d2d2d;
	line-height: 1.5em;
}

.popup_btnGroup {
	display: flex;
	height: 70rpx;
	overflow: hidden;
	line-height: 70rpx;
	margin-top: 20rpx;
	margin-bottom: 40rpx;
}

.u-btn {
	flex: 1;
	height: 100%;
	text-align: center;
	background-color: #efefef;
	color: #303030;
	border-radius: 8rpx;
}

.u-btn-danger {
	margin-left: 40rpx;
	background-color: #d9625e;
	color: #fff;
}

.popup_dangerTitle {
	color: #d9625e;
	font-size: 24rpx;
	margin-bottom: 20rpx;
}



.queueList {
	background: rgba(115, 114, 110, 0.7);
	width: 250rpx;
	height: 270rpx;
	position: absolute;
	z-index: 10;
	right: 20rpx;
	top: 7%;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	font-size: 26rpx;

	.queue_index {
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin-top: 10rpx;
		overflow: auto;
	}
}

.yfsMask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明黑色遮罩层 */
	z-index: 80;
}

.ysf-center {
	width: 95%;
	height: 700rpx;
	overflow: hidden;
	overflow-y: auto;
	margin: 0 auto;
	border-radius: 20rpx;
	background-color: rgb(31, 29, 41);
}

.center-con {
	width: 100%;
	height: 100rpx;
	/* background-color: palevioletred; */
	display: flex;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.rank {
	width: 280rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color: #db7093;
	font-size: 35rpx;
	font-weight: 1000;
}

.detail {
	width: 100%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color: white;
}

.num {
	width: 50%;
	height: 70rpx;
	text-align: center;
	line-height: 100rpx;
	color: white;
}

.container {
	padding: 30rpx;
	// height: 2000rpx;
	background-color: black;

	.records {
		overflow-y: auto;

		.records-img {
			width: 260rpx;
			height: 280rpx;
			margin-top: 150rpx;
			margin-left: 220rpx;
		}

		.records-text {
			margin-top: 50rpx;
			color: #fff;
			text-align: center;
		}

		.recordsItem {
			width: 680rpx;
			height: 130rpx;
			background: linear-gradient(45deg, rgb(52, 50, 54), rgb(72, 69, 94), rgb(28, 41, 57));
			border-radius: 30rpx;
			border: 1rpx solid rgb(101, 48, 217);
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			color: #fff;
			font-size: 28rpx;
			position: relative;
			overflow: hidden;
			margin-bottom: 10rpx;

			.winTime {
				color: #ababab;
				margin-top: 15rpx;
				font-size: 27rpx;
			}

			.box-image-g {
				width: 60rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}

			.head {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-left: 50rpx;
				margin-right: 20rpx;
			}

			.cont-text {
				width: 320rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.usercont {
				font-size: 26rpx;

				text {
					color: #ababab;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

				}
			}

			.tip {
				position: absolute;
				background-image: url(../../static/manghe/mark.png);
				background-size: cover;
				background-repeat: no-repeat;
				width: 110rpx;
				left: 0;
				bottom: 0;

				text {
					color: #fff;
					font-size: 25rpx;
					font-weight: 900;
					margin-left: 18rpx;
					display: block;
					margin-bottom: 5rpx;
				}
			}
		}

	}

	.pay {
		width: 100%;
		height: 700rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 30rpx 0;
		overflow: auto;

		.prices {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			.contents {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}
		}

		.image-price {
			width: 220rpx;
			height: 220rpx;
		}

		h3 {
			margin: 30rpx 0 50rpx;
			text-align: center;
			color: #000;
		}

		.price {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
			}
		}

		.num {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;
		}

		.list-item {
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 10px;
		}

		.list-item .body {
			flex: 1;
			display: flex;
			align-items: center;
		}

		.list-item-title {
			flex: 1;
		}

		.meta {
			font-size: 35rpx;
			// color: #000;
		}

		.redPack {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				display: flex;
				align-items: center;
				height: 100%;
			}
		}


		.sunList {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.sum {

				box-sizing: border-box;
				padding: 0 20rpx;
				color: #000;
				margin-bottom: 20rpx;
				font-weight: 100;

				text:nth-child(2) {
					font-weight: 900;
					background: #6C40FF;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.sums {
				box-sizing: border-box;
				padding: 0 20rpx;
				color: #000;
				margin-bottom: 20rpx;
				font-weight: 100;

				text:nth-child(2) {
					font-weight: 900;
					background: red;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.agree {
			color: #000;
			font-size: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				transform: scale(0.6);
				display: block;
			}

			u {
				color: #6C40FF;
			}
		}

		.skip {
			margin: 0 -70rpx;

			text {
				transform: scale(0.8);
				display: block;
				font-size: 36rpx;
				display: flex;
				align-items: center;

				span {
					margin-left: 16rpx;
					line-height: 40rpx;
				}
			}
		}

		.button {
			width: 560rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin: 30rpx auto;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 15rpx;
			color: #fff;
			background: url(../../static/seach.png) center/ cover no-repeat;
		}
	}

	.ccb {
		width: 100%;
		height: 100rpx;
		position: relative;
		background: url("../../../src/static/playMarket/juxing.png") no-repeat;
		background-size: contain;

		.countDown {
			display: flex;
			justify-content: center;
			line-height: 90rpx;
			color: #fff;
		}

		.gogo {
			width: 100%;
			display: flex;
			align-items: center;
			height: 90rpx;

			box-sizing: border-box;

			justify-content: space-around;
			align-items: center;

			view {
				&:first-child {
					color: blue;
					font-size: 35rpx
				}

				&:nth-child(2) {
					color: red;
					font-size: 26rpx;
				}

				&:last-child {
					color: white;
					font-size: 20rpx
				}
			}
		}

	}

	.paidui,
	.unqueue {
		width: 120rpx;
		border: 50rpx;
		height: 120rpx;

		z-index: 10;
		background: url("../../../src/static/playMarket/xuanfu.png") no-repeat;
		background-size: cover;
		font-size: 30rpx;
		font-weight: bolder;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.paidui {
		position: fixed;
		top: 60%;
		right: 20rpx;
	}

	.unqueue {
		position: fixed;
		top: 71%;
		right: 20rpx;
	}

	.navBar {
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: #fff;
		align-items: center;

		.title {
			font-size: 45rpx;
			background: url("../../../src/static/fontSize.png") no-repeat;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
		}
	}

	.tips {
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 33rpx;
		margin-top: 20rpx;
		background: url("../../../src/static/fontSize.png") no-repeat;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.uni-margin-wrap {
		border-radius: 20rpx;
		height: 450rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.swiper {
		height: 450rpx;
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;

		.list {
			position: relative;
			height: 450rpx;

			.danmu-box {
				position: absolute;
				width: 650rpx;
				margin: 0 auto;
				height: 320rpx;
				top: 0;
				left: 18rpx;
				overflow: hidden;
			}

			.danmu1 {
				height: 50rpx;
				background-color: #eaeaea;
				opacity: 0.5;
				text-align: center;
				border-radius: 20rpx;
				color: #998480;
				padding: 0 10rpx;
				white-space: nowrap;

			}


			.swiper-item {
				display: block;
				width: 100%;
				height: 450rpx;
				line-height: 450rpx;
				text-align: center;
				background: url("../../static/playMarket/lunbo.png") no-repeat;
				background-size: cover;

			}

			.btn {
				position: absolute;
				bottom: 50rpx;
				display: flex;
				justify-content: space-between;
				width: 100%;
				color: #fff;

				.b1,
				.b2 {

					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background-color: #6C40FF;
					border-radius: 10rpx;
				}

				.b1 {
					margin-left: 40rpx;
				}

				.b2 {
					margin-right: 40rpx;
				}
			}
		}
	}

	.center {
		width: 100%;
		// margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		height: 130rpx;
		align-items: center;
		box-sizing: border-box;

		.active,
		.actived {
			font-size: 30rpx;
			color: #fff;
			background: url("@/static/playMarket/active.png") no-repeat;
			background-size: cover;
			font-weight: bold;
			width: 195rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}

		.actived {
			background: url("@/static/playMarket/actived.png") no-repeat;
			background-size: contain;
		}
	}


	.content {
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		border-radius: 20rpx;
		// height: 808rpx;
		align-items: center;
		width: 100%;
		margin-bottom: 130rpx;

		.content-list {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 25%;
			height: 280rpx;
			margin-top: 20rpx;
			position: relative;
			/* 添加相对定位 */
			z-index: 2;
			padding: 20rpx;
			margin-right: 20rpx;

			// .mengban {
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 9999;
			// 	width: 180rpx;
			// 	height: 340rpx;
			// 	padding: 20rpx;
			// 	background: url("../../static/playMarket/menban.png") no-repeat;
			// 	background-size: cover;

			// }
		}

		.content-list:nth-child(3n) {
			margin-right: 0;
		}

	}


	/* 添加背景图片样式 */
	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		/* 将背景图放在最底层 */
		border-radius: 20rpx;
	}

	.content-list-title {
		color: #fff;
		font-size: 25rpx;
		z-index: 2;
		height: 88rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.content-list-footer {
		display: flex;
		justify-content: space-between;
		height: 50rpx;
		align-items: flex-end;
		font-size: 20rpx;
		color: #fff;
		z-index: 2;
	}

	.content-list-stock {
		color: #fff;
		font-weight: bold;
		z-index: 2;
		font-size: 23rpx;
		margin-top: 10rpx;
		text-align: right;
	}

	.yfsmengban {
		width: 180rpx;
		height: 280rpx;
		background: rgba(255, 255, 255, .3);
		line-height: 280rpx;
		padding: 20rpx;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		color: white;
		font-size: 33rpx;

	}

	.count {
		color: orangered;
	}

	.header {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		z-index: 999;
		font-size: 20rpx;
		color: #fff;
		overflow: hidden;

		// .left,
		// .right {
		// 	position: relative;
		// 	top: 0;
		// }
		.left {
			width: 80rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			background: url(../../static/playMarket/left.png) no-repeat center;
			background-size: contain;
			font-weight: bold;
			overflow: hidden;
			border-top-left-radius: 20rpx;
		}

		.right {

			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			// background: url(../../static/playMarket/right.png) no-repeat center;
			// background-size: contain;
			font-weight: bold;
			overflow: hidden;
			border-top-right-radius: 20rpx;
			// background-color: #6c40ff;
			border-bottom-left-radius: 12rpx;
		}
	}

	.choujiang {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		z-index: 10;
		width: 100%;
		display: flex;
		color: #fff;
		justify-content: space-around;


		.cj-list {
			background: url(../../../src/static/playMarket/laiyifa.png) no-repeat;
			background-size: contain;
			width: 150rpx;
			height: 72rpx;
			text-align: center;
		}
	}

	.queuePrompt {
		width: 420rpx;
		height: 80rpx;
		color: #fff;
		background-color: rgba(115, 114, 110, 0.7);
		position: fixed;
		bottom: 140rpx;
		left: 160rpx;
		z-index: 10;
		text-align: center;
		line-height: 80rpx;
		border-radius: 15rpx;
	}
}

.particulars {
	::v-deep &>p {
		width: 100%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
